<template>
	<view>
		<u-toast ref="uToast" />
		<view class="message_box">
			<view v-if="store.message_list.length>0">
				<u-swipe-action :show="item.show" :index="index" v-for="(item, index) in store.message_list" :key="item.id" @click="onClick" :options="options">
					<view class="message_list u-border-bottom" @click="jump" :data-id="item.sendId">
						<view class="cen">
							<view class="icon">
								<image :src="item.u_icon"></image>
							</view>
							<!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 -->
							<view class="info">
								<view class="name" :class="item.class">{{ item.u_sendName }}<image v-if="item.hy_src!=''" :src="item.hy_src"></image> </view>
								<view class="descript">{{ item.message }}</view>
								<!-- <view class="descript" v-else>[图片]{{item.message}}</view> -->
							</view>
							
							<view class="time">{{ $u.timeFormat(item.time, 'hh:MM') }}</view>
						</view>
						
						<view v-if="item.num>0" class="num">
							{{ item.num }}
						</view>
					</view>
				</u-swipe-action>
			</view>
			
			<view v-if="loading" class="tips_messgae">
				加载中...
			</view>
			<view @click="getData()" v-else-if="error" class="tips_messgae">
				加载失败，点我重试
			</view>
			<view v-else-if="store.message_list.length<=0" style="display: flex;padding-top: 30vh;justify-content: center;">
				<u-empty  text="您的消息列表为空" mode="message"></u-empty>
			</view>
			<view v-else-if="end" class="tips_messgae">
				我也是有底线的
			</view>
			<!-- <view class="message_list" v-for="(v,k) in 10" :key="k" @click="jump">
				<view class="cen">
					<view class="icon">
						<image src="https://lanhu.oss-cn-beijing.aliyuncs.com/xd4ef34a4f-1908-4d6e-9a51-6d8a551f46d9"></image>
					</view>
					
					<view class="info">
						<view class="name">建美家缘官方团队</view>
						<view class="descript" v-if="v%2==0">你好，在吗？</view>
						<view class="descript" v-else>
							<span>19岁</span>
							<span>本科</span>
							<span>5千-1万</span>
							<span>广东广州</span>
							<span>未婚</span>
						</view>
					</view>
					
					<view class="time">9:20</view>
				</view>
			</view> -->
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [
					
				],
				key:[],
				options: [
					{
						text: '删除',
						style: {
							backgroundColor: '#dd524d'
						}
					}
				],
				loading:false,
				error: false,
				end:false,
				page:1,
				store:null
			}
		},
		methods: {
			getData(){
				
				if(this.loading){
					return false
				}	
				
				this.loading = true
				
				this.error = false
					
				let that = this
				
				this.$request({
					url:'/Message',
					data:{page:that.page},
					method:'post',
					success(res){
						if(res.statusCode==200){
							
							if(res.data.code==1){
								
								let time = res.data.data.time
								
								for(var i in res.data.data.data){
									let row=res.data.data.data[i]
									
									row.show = false
									
									row.class=''
									
									row.hy_src=''
									
									if(row.u_supremeTime > time){
										row.class='text_color1'
										
										row.hy_src='../../static/image/hg.png'
									}else if(row.u_memberTime > time){
										row.class='text_color2'
										
										row.hy_src='../../static/image/hy.png'
									}
									
									that.$store.state.message_list.push(row)
									
									that.$store.state.message_key.push(row.sendId)
								}
								
								// console.log()
								
								if(res.data.data.page>=res.data.data.allpage){
									that.end = true
								}else{
									that.page = res.data.data.page+1
								}
								
							}else{
								that.error = true
								
								that.$refs.uToast.show({
									title: res.data.msg,
									type: 'warning'
								})
							}
							
						}else{
							that.error = true
							
							that.$refs.uToast.show({
								title: '网络繁忙',
								type: 'warning'
							})
						}
					},
					fail(err){
						that.error = true
						
						that.$refs.uToast.show({
							title: '请求失败',
							type: 'warning'
						})
					},
					complete(){
						that.loading = false
						
						uni.stopPullDownRefresh()
					}
				})
			},
			onClick(index,index1){
				
				let that = this
				
				let id = that.$store.state.message_key[index]
				
				that.$store.state.message_key.splice(index,1)
				
				that.$store.state.message_list.splice(index,1)
				
				return false;
				this.$request({
					url:'/message/dele',
					data:{id:id},
					method:'post',
					success(res){
						
					},
					fail(){}
				})
			},
			jump(e){
				
				let id=e.currentTarget.dataset.id
				
				uni.navigateTo({
				    url: '/pages/message_details/message_details?id='+id
				});
				
			}
		},
		onLoad(){
			let that = this
			
			that.$store.state.message_list=[]
			
			this.store = that.$store.state
			
			this.getData()
		},
		onPullDownRefresh(){
			this.page=1
			this.end = false
			this.$store.state.message_list = []
			this.getData()
		},
		onReachBottom(){
			if(this.end){
				return false
			}
			
			this.getData();
		}
		
	}
</script>

<style scoped>
	
	view.message_box{
		width:750rpx;
		display: flex;
		flex-direction: column;
		font-size:26rpx;
		color:#888888;
	}
	view.message_box view.message_list{
		width:750rpx;
		min-height: 140rpx;
		border-bottom: 1px solid #efefef;
		display: flex;
		align-items: center;
		position: relative;
	}
	view.message_box view.message_list view.num{
		background-color: #FA5151;
		color:#fff;
		padding:3rpx 10rpx;
		border-radius: 20rpx;
		position: absolute;
		bottom: 20rpx;
		right:40rpx;
	}
	view.message_box view.message_list view.cen{
		width: 710rpx;
		margin-left:20rpx;
		/* border:1px solid red; */
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	view.message_list view.cen view.icon, view.message_list view.cen view.icon image{
		width:80rpx !important;
		height: 80rpx !important;
	}
	view.message_list view.cen view.time{
		width:80rpx;
		height: 80rpx;
	}
	view.message_box view.message_list view.cen view.icon{
		border-radius:80rpx ;
		overflow: hidden;
	}
	view.message_box view.message_list view.cen view.info{
		width:500rpx;
		/* display: flex; */
	}
	view.message_box view.message_list view.cen view.info .name{
		display: flex;
		align-items: center;
	}
	view.message_box view.message_list view.cen view.info .name image{
		width:30rpx;
		height: 30rpx;
		margin-left: 10rpx;
	}
	view.message_box view.message_list view.cen view.info .text_color1{
		color:#FFAA10 !important;
	}
	view.message_box view.message_list view.cen view.info .text_color2{
		color:red !important;
	}
	view.message_box view.message_list view.cen view.info view{
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-top: 8rpx;
	}
	view.message_box view.message_list view.cen view.info view:first-child{
		color:#000;
		font-size:32rpx;
	}
	
	.descript span{
		padding: 0 10rpx;
		border-right: 1px solid #888;
	}
	view.message_box view.message_list view.cen view.info .descript span:last-child{
		border:0;
	}
</style>